<script type="text/javascript">     

$(document).ready(function(){                                 
                         
    function OpenImageManager(trigger){

        mcImageManager.open('','','',
            function(img_path){
                ImageManagerCallback(img_path, trigger);				
            },
            { 
				rootpath : '{0}/<?=PORTFOLIO_IMG_FOLDER?>',
				document_base_url : '<?=base_url().UPLOADS_FOLDER.PORTFOLIO_IMG_FOLDER?>',
            	relative_urls : true
			}
        );
    }

    function ImageManagerCallback(img_path, trigger){

        if (typeof(trigger)=='undefined'){

            Add_New_Image(img_path);
            $('#more_images_container .ImageManager_Widget:last .img_path').change();
                                                                                  
        } else { 

            parent = $(trigger).parents(".ImageManager_Widget");
            parent_id = $(parent).attr('id');

            if ( (parent_id == "top_bar_img") || (parent_id == "main_img") )
                display_path = "<?=base_url().UPLOADS_FOLDER.PORTFOLIO_IMG_FOLDER;?>"+img_path;
            else 
                display_path = get_thumb_path(img_path);

            $(parent).find("img").attr("src", display_path);
            $(parent).find("input.img_path").val(img_path).change();
        }

    }

    // bind triggers that open the ImageManager
    $(".open_image_manager").live("click", function () {       
        OpenImageManager(this);
        return false;
    });

    $("#add_image").click(function(){                      
        OpenImageManager();                                
        return false;
    }); 

    function Add_New_Image(img_path){
        var html = '';
        html += '<div class="ImageManager_Widget thumb_block">';
        html += '   <img src="'+get_thumb_path(img_path)+'" />';                                                      
        html += '   <a class="open_image_manager button" href="#">change</a>';
        html += '   <a class="delete_parent button" title="You\'re about to remove an image. Confirm?" rel="div" href="#">remove</a> ';
        html += '   <input name="images[]" class="img_path" type="hidden" value="'+img_path+'" />';
        html += '</div>';
        $('#more_images_container').append(html);
        $('#more_images_container .ImageManager_Widget:last').hide().fadeIn(); 
    } 
    

    //receives an image url and returns it's absolute thumbnail path
    function get_thumb_path(img_path){         
        slash = img_path.lastIndexOf("/");
        if (slash == -1){
            rel_path = "<?=THUMBS_FOLDER?>"+img_path;
        }else{
            filename = img_path.substring(slash+1);
            thumb_path = img_path.replace(filename, "<?=THUMBS_FOLDER?>"+filename);
            rel_path = thumb_path;
        }
        return '<?=base_url().UPLOADS_FOLDER.PORTFOLIO_IMG_FOLDER;?>'+rel_path;
    }        

    // delete parent selector that matches the rel attribute
    $(".delete_parent").live('click', function() {  
        if  ( (!$(this).attr('title') ) || (confirm($(this).attr('title'))) ) {
            $(this).parent($(this+"[rel]")).fadeOut('normal', function(){
                $(this).find("input:first").change();
                $(this).remove();
            });
        }            
        return false;
    });   

});       
</script>

<div id="main_img" class="content_block ImageManager_Widget">
    <h4>Main Image</h4>
    <img src="<?=base_url().UPLOADS_FOLDER.PORTFOLIO_IMG_FOLDER.set_value('main_image', $item['Main_Image'])?>" style="display:block" />
    <a class="open_image_manager button" href="#">SELECT IMAGE</a>
    <input type="hidden" name="main_image" class="img_path" value="<?=set_value('main_image', $item['Main_Image'])?>" />    
</div>    


<div class="content_block">  
    <h4>More images</h4>
    <div id="more_images_container">
        <? foreach($images as $img){?>
        <div class="ImageManager_Widget thumb_block" style="width:102px">
            <img src="<?=Thumbnail(base_url().UPLOADS_FOLDER.PORTFOLIO_IMG_FOLDER.$img)?>" />
            <a class="open_image_manager button" href="#">change</a>
            <a class="delete_parent button" title="You're about to remove an image. Confirm?" rel="div" href="#">remove</a> 
            <input name="images[]" class="img_path" type="hidden" value="<?=$img?>" />
        </div>
        <? } ?>
    </div>                      

    <a href="#" id="add_image" class="button">ADD IMAGE</a>
</div>  
